<template>
<div class="tab-container" style="overflow-y: auto;">

  <table v-show="!show" cellpadding=0 cellspacing=0 border="0" style="width:100%;border: 1px solid#ccc;padding: 50px;">
    <tr style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 标题</td>
      <td>
        <textarea placeholder="请输入标题" maxlength="200" v-model="content.title" rows="3" cols="20" style="width:80%;height:80px;">
        </textarea>
      </td>
      <td style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 所属栏目</td>
      <td>
        <el-select v-model="content.categroyId" style="height:30px;width:80%" placeholder="请选择">

          <el-option v-for="item in leafNodeslist" :label="item.name" :key="item.name" :value="item.id">
          </el-option>
        </el-select>
      </td>
    </tr>
    <tr style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 封面</td>
      <td>
        <el-upload class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF" :http-request="uploadSectionFile" :before-upload="beforeUploadImg" list-type="picture-card" :file-list="content.covers" :on-success="handleAvatarSuccess"
          :on-remove="handleRemove">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </td>
      <td style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span>&nbsp;内容类型</td>
      <td>
        <el-select v-model="content.typeId" style="height:30px;width:80%" placeholder="请选择">

          <el-option label="文章" :key=1 :value=1>
          </el-option>
          <el-option label="轮播" :key=2 :value=2>
          </el-option>
        </el-select>
      </td>
    </tr>

    <tr>
      <td style="width:100px;padding:10px">&nbsp;&nbsp;是否外链</td>
      <td>
        <el-select v-model="content.onlyUrl" style="height:30px;width:80%" placeholder="请选择">
          <el-option label="是" :key=1 :value=1>
          </el-option>
          <el-option label="否" :key=0 :value=0>
          </el-option>
        </el-select>
      </td>
      <td v-show="content.onlyUrl == 1" style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 外链地址</td>
      <td v-show="content.onlyUrl == 1">
        <el-input v-model="content.contentUrl" placeholder="请输入外链地址" style="width:80%"></el-input>
      </td>
    </tr>
    <tr v-show="content.typeId == 1">
      <td style="width:100px;padding:10px">&nbsp;&nbsp;是否转载</td>
      <td>
        <el-select v-model="content.copied" style="height:30px;width:80%" placeholder="请选择">

          <el-option label="转载" :key=1 :value=1>
          </el-option>
          <el-option label="非转载" :key=0 :value=0>
          </el-option>
        </el-select>
      </td>
    </tr>
    <tr v-show="content.copied == 1 && content.typeId == 1" style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 来源</td>
      <td>
        <el-input v-model="content.copyFrom" placeholder="请输入来源" style="width:80%"></el-input>
      </td>
      <td style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 来源网址</td>
      <td>
        <el-input v-model="content.copyFromUrl" placeholder="请输入来源网址" style="width:80%"></el-input>
      </td>
    </tr>
    <tr v-show="content.typeId == 1" style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px">&nbsp;&nbsp;作者</td>
      <td>
        <el-input v-model="content.author" placeholder="请输入作者" style="width:80%"></el-input>
      </td>
      <td style="width:100px;padding:10px">&nbsp;&nbsp;编辑</td>
      <td>
        <el-input v-model="content.editor" placeholder="请输入编辑" style="width:80%"></el-input>
      </td>
    </tr>
    <tr style="border-bottom: 1px solid#ccc;">
      <td v-show="content.typeId == 1" style="width:100px;padding:10px">&nbsp;&nbsp;标签</td>
      <td v-show="content.typeId == 1">
        <el-input v-model="content.tags" placeholder="请输入标签" style="width:80%"></el-input>
      </td>
      <td style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 描述</td>
      <td>
        <el-input v-model="content.description" placeholder="请输入描述" style="width:80%"></el-input>
      </td>
    </tr>
    <tr style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px">&nbsp;&nbsp;定时发布</td>
      <td>
        <el-select v-model="content.publishNow" style="height:30px;width:80%" placeholder="请选择">

          <el-option label="是" :key=1 :value=1>
          </el-option>
          <el-option label="否" :key=0 :value=0>
          </el-option>
        </el-select>
      </td>
      <td v-show="content.publishNow == 1" style="width:100px;padding:10px"><span style='color: #f60d0d;'>*</span> 发布日期</td>
      <td v-show="content.publishNow == 1">
        <el-date-picker v-model="content.publishDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期">
        </el-date-picker>
      </td>
    </tr>
    <tr style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px">&nbsp;&nbsp;置顶</td>
      <td>
        <el-select v-model="content.stickSort" style="height:30px;width:80%" placeholder="请选择">
          <el-option label="是" :key=0 :value=0>
          </el-option>
          <el-option label="否" :key=9999 :value=9999>
          </el-option>
        </el-select>
      </td>
      <td v-show="content.typeId == 1" style="width:100px;padding:10px">&nbsp;&nbsp;推荐</td>
      <td v-show="content.typeId == 1">
        <el-select v-model="content.recommend" style="height:30px;width:80%" placeholder="请选择">

          <el-option label="是" :key=1 :value=1>
          </el-option>
          <el-option label="否" :key=0 :value=0>
          </el-option>
        </el-select>
      </td>
    </tr>

    <tr v-show="content.typeId == 1" style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px">&nbsp;&nbsp;活动内容</td>
      <td colspan=3>
        <!-- <tinymce :height="300" v-model="content.contentTxt"></tinymce> -->
        <editor v-model="content.contentTxt" :setting="editorSetting" :init="editorInit"></editor>
      </td>
    </tr>

    <tr style="border-bottom: 1px solid#ccc;">
      <td style="width:100px;padding:10px">&nbsp;&nbsp;附件</td>
      <td colspan=3>
        <div>
          <div class="iconfont" style="float:left;padding-right: 15px;" v-for="item in content.cmsFileList">
            <el-dropdown>
              <span class="el-dropdown-link">
                  <i v-show="item.fileObj == 'video'" class="iconfont  icon-shipin" slot="right"></i>
                  <i v-show="item.fileObj == 'img'" class="iconfont  icon-tupian1" slot="right"></i>
                  <i v-show="item.fileObj == 'word'" class="iconfont  icon-Word" slot="right"></i>
                  <i v-show="item.fileObj == 'txt'" class="iconfont  icon-txt" slot="right"></i>
                  <i v-show="item.fileObj == 'mp3'" class="iconfont  icon-music" slot="right"></i>
                  <i v-show="item.fileObj == 'file'" class="iconfont  icon-wenjian" slot="right"></i>
               </span>
              <el-dropdown-menu slot="dropdown">
                <div class="" @click="subDownloadExchanges(item)">
                  <el-dropdown-item>下载</el-dropdown-item>
                </div>
                <div class="" @click="subDelFile(item)">
                  <el-dropdown-item style="color:red">删除</el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="iconfont" style="float:left;padding-left: 5px;">
            <el-upload :action="uploadUrl" :show-file-list="false" :on-preview="handlePictureCardPreview" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
              <i class="iconfont  icon-htmal5icon18"></i>
            </el-upload>
          </div>
          <!-- <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="position: relative;left: 20%;"></el-progress> -->

        </div>
      </td>
    </tr>

  </table>
  <div style="padding-left: 35%;margin: 40px 0  0  0;height: 100px;">
    <div class="" style="padding:15px" v-if="!$route.params.objData">
      <el-radio-group v-model="checkStatus">
        <el-radio :label="-1">草稿</el-radio>
        <el-radio :label="0">提交待审</el-radio>
        <el-radio :label="1">直接审核</el-radio>
      </el-radio-group>
    </div>
    <div class="">
      <el-button type="primary" style="width: 120px;" @click="saveObj(checkStatus)">保存</el-button>
      <el-button type="primary" style="width: 120px;" @click="back">返回</el-button>
    </div>
  </div>
</div>
</template>

<script>
// import Tinymce from '@/components/Tinymce'
import Editor from '@tinymce/tinymce-vue';
import {
  getCategory,
  postCategoryC,
  getCategoryC,
  delCategoryC,
  rejectCategory,
  checkCategory,
  onCategory,
  offCategory,
  topCategory,
  getLeafNodes,
  delFile,
  uploadFile,
  uploadCategory
} from '@/api/columnManage'

import {
  addLib,
  delLib,
  rejectUserDetail,
  offUserDetail,
  onUserDetail,
  PLrejectUserDetail,
  PLoffUserDetails,
} from '@/api/library'
import table2excel from 'table2excel'
import printArea from 'printArea'
import {
  getToken,
} from '@/utils/auth'

export default {
  components: {
    // Tinymce
    'editor': Editor
  },
  data() {
    return {
      uploadUrl: this.docUrl+'/category/content/upload?token=' + getToken(),
      editorInit: {
        language: 'zh_CN',
        plugins: [
          'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality  fullscreen hr image imagetools importcss insertdatetime link lists  nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
          // 'image  code codesample preview colorpicker'
        ],
        toolbar: ['fontselect fontsizeselect  bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
          'hr bullist numlist link image charmap	 preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
        ],
        fontsize_formats: "8px 10px 12px 14px 18px 20px 24px 36px",
        font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
        height: 300,
        images_upload_handler(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          uploadCategory(formData, '1').then(res => {
            success(Vue.prototype.imgBaseUrl + res.data.savePath)
          }).catch(() => {
            failure('上传失败，请重新上传')
          })
        },
      },
      rej: {
        way: '1',
        info: '',
        formId: ''
      },
      xyset: {
        order: '',
        id: ''
      },
      title: "",
      input: {
        objName: '',
        enrollStart: '',
        enrollEnd: '',
        checkStatus: 1,
      },
      bank: '1',
      list: [],
      timeType: '1',
      dialogStatus: '',
      dialogFormVisible: false,
      dialogShowRole: false,
      dialogShowDep: false,
      dialogShowSH: false,
      dialogShowLevel: false,
      dialogadd: false,
      dialogsave: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
      },
      treeData: [],
      loading: true,
      userType: '',
      multipleSelection: [],
      detailData: '',
      tfcheckStatus: '',
      checkStatus: -1,
      leafNodeslist: [],
      content: {
        title: '',
        categroyId: '',
        typeId: 1,
        copied: 0,
        onlyUrl: 0,
        contentUrl: '',
        copyFrom: '',
        copyFromUrl: '',
        author: '',
        editor: '',
        cover: '',
        covers: [{
          url: this.imgBaseUrl + `def/topiccover.png`
        }],
        tags: '',
        description: '',
        onlyUrl: 0,
        contentUrl: '',
        publishNow: 1,
        publishDate: '',
        contentTxt: '',
        stickSort: 0,
        recommend: 0,
        cmsFileList: []
      }
    }
  },
  async mounted() {
    if (this.$route.params.itemId) {
      this.loadData(this.$route.params.itemId)
      if (this.$route.params.checkStatus > 1) {
        this.checkStatus = 1
      } else {
        this.checkStatus = this.$route.params.checkStatus
      }
    } else {
      this.loadgetLeafNodes()
    }


  },
  computed: {},
  methods: {


    beforeUploadImg(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (['image/png', 'image/jpeg', ].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的图片');
        return false;
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过10MB哦!');
        return false;
      }
    },
    //封面上传
    async uploadSectionFile(param) { //自定义文件上传
      this.content.covers = []
      var fileObj = param.file;
      // 接收上传文件的后台地址
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      // 其他参数
      // form.append("xxx", xxx);
      let {
        data,
        success
      } = await uploadFile(form)
      debugger
      let obj = {
        name: data.fileName,
        url: this.imgBaseUrl + data.savePath
      }
      this.content.covers.push(obj)
    },

    back() {
      window.history.go(-1);
    },
    async loadData(id) {
      let {
        data,
        success
      } = await getCategoryC(id)
      var myFilter = Vue.filter('formatTime')
      this.content = data
      this.content.publishDate = myFilter(data.publishDate)
      debugger
      this.content.covers = [{
        name: 'name.jpg',
        url: this.imgBaseUrl + data.cover
      }] //封面赋值显示仅仅

      let arr = data.cmsFileList
      if (arr.length > 0) {
        for (var i in arr) {
          let name = arr[i].fileName
          if (name.indexOf('mp4') > -1 || name.indexOf('avi') > -1 || name.indexOf('rmvb') > -1) {
            name = 'video'
          } else if (name.indexOf('jpg') > -1 || name.indexOf('jpeg') > -1 || name.indexOf('png') > -1) {
            name = 'img'
          } else if (name.indexOf('txt') > -1) {
            name = 'txt'
          } else if (name.indexOf('xlsx') > -1 || name.indexOf('docx') > -1 || name.indexOf('doc') > -1) {
            name = 'word'
          } else if (name.indexOf('mp3') > -1) {
            name = 'mp3'
          } else {
            name = 'file'
          }
          arr[i].fileObj = name
        }
      }

      this.content.cmsFileList = data.cmsFileList
      this.loadgetLeafNodes()
    },
    async loadgetLeafNodes() {
      let {
        data,
        success
      } = await getLeafNodes()
      if (success) {
        this.leafNodeslist = data
      }
    },

    async saveObj(checkStatus) {
      if (!this.content.publishDate && this.content.publishNow == 0) {
        this.content.publishDate = this.getformatTime()
      }
      if (this.content.typeId == 1) {
        if (!this.validata.validacontent(this.content)) return
      } else {
        if (!this.validata.validacontent2(this.content)) return
      }


      let coversarr = this.content.covers[0].url
      if (coversarr.indexOf('/cover/') > -1) {
        this.content.covers[0].url = coversarr.substring(coversarr.indexOf('/cover/') + 1, coversarr.length)
      } else {
        this.content.covers[0].url = coversarr.substring(coversarr.indexOf('/def/') + 1, coversarr.length)
      }

      let arr = {}
      arr = this.content
      arr.checkStatus = checkStatus
      let {
        data,
        success
      } = await postCategoryC(arr)

      if (success) {
        this.$message({
          message: '保存成功',
          type: 'success'
        });

        this.content.covers = [{
          name: 'name.jpg',
          url: this.imgBaseUrl + this.content.covers[0].url
        }] //封面赋值显示仅仅
        window.history.go(-1);
      } else {
        this.$message({
          message: data.message,
          type: 'success'
        });
      }
    },
    async subDownloadExchanges(item) {
      window.open(this.imgBaseUrl+ item.savePath);
    },
    async subDelFile(item) {
      let {
        data,
        success
      } = await delFile(item.id)
      this.content.cmsFileList.splice(this.content.cmsFileList.indexOf(item), 1)
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
    },
    //附件返回
    handleVideoSuccess(res, file) {
      let obj = file.response.data
      if (obj.fileName) {
        if (obj.fileName.indexOf('mp4') > -1 || obj.fileName.indexOf('avi') > -1 || obj.fileName.indexOf('rmvb') > -1) {
          obj.fileObj = 'video'
        } else if (obj.fileName.indexOf('jpg') > -1 || obj.fileName.indexOf('jpeg') > -1 || obj.fileName.indexOf('png') > -1) {
          obj.fileObj = 'img'
        } else if (obj.fileName.indexOf('txt') > -1) {
          obj.fileObj = 'txt'
        } else if (obj.fileName.indexOf('xlsx') > -1 || obj.fileName.indexOf('docx') > -1 || obj.fileName.indexOf('doc') > -1) {
          obj.fileObj = 'word'
        } else if (obj.fileName.indexOf('mp3') > -1) {
          obj.fileObj = 'mp3'
        } else {
          obj.fileObj = 'file'
        }
        this.content.cmsFileList.push(obj)
      }
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      // if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
      //     this.$message.error('请上传正确的视频格式');
      //     return false;
      // }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过10MB哦!');
        return false;
      }
    },
    showDetail() {
      this.dialogShowDep = true
    },
    handlePrint() {
      $("#tablePrint").printArea();
    },
    handleDownload() { //导出
      $("#tableExcel").table2excel({
        exclude: ".noExl", //过滤位置的 css 类名
        filename: new Date().getTime() + ".xls", //文件名称
        name: "Excel Document Name.xlsx",
        exclude_img: true,
        exclude_links: true,
        exclude_inputs: true
      })
    },

    handleSizeChange(val) {
      if (!isNaN(val)) {
        this.listQuery.limit = val
      }
      this.loadPageList()
    },
    handleCurrentChange(val) {
      if (!isNaN(val)) {
        this.listQuery.page = val
      }
      this.loadPageList()
    },




  }
}
</script>

<style lang="scss">
@import '../../styles/index.scss'; // 全局自定义的css样式
</style>
